<template>
  <div>
    <BookInfo :info="info"></BookInfo>
    <CommentList :comments="comments"></CommentList>
    <div v-if="showAdd" class="comments">
      <textarea v-model="comment"
                class="textare"
                :maxlength="-1"
                placeholder="请输入图书短评"></textarea>
      <div class="location">
        地理位置：
        <switch color="#EA5A49" :checked="location" @change="getGeo"></switch>
        <span class="text-primary">{{location}}</span>
      </div>
      <div class="phone">
        手机型号:
        <switch color="#EA5A49" :checked="phone" @change="getPhone"></switch>
        <span class="text-primary">{{phone}}</span>
      </div>
      <button class="btn" @click="addComment">提交</button>
    </div>
    <div v-else class="no-data">未登录或已评论</div>
    <button class="btn" open-type="share">分享好友</button>
  </div>
</template>
<script>
import {get, post} from '@/utils'
import BookInfo from '@/components/BookInfo'
import CommentList from '@/components/CommentList'

export default {
  data () {
    return {
      id: '',
      info: {},
      comment: '',
      location: '',
      phone: '',
      userInfo: {},
      comments: []
    }
  },
  components: {
    BookInfo,
    CommentList
  },
  methods: {
    async getDetail () {
      const info = await get('/weapp/bookdetail', { id: this.id })
      wx.setNavigationBarTitle({
        title: info.data.title
      })
      this.info = info.data
    },
    getGeo (e) {
      console.log(e.target.value)
      const ak = 'vEVFlLMdmccFGvHSqKlZFqWSTVmrGH1n'
      const url = 'http://api.map.baidu.com/geocoder/v2/'
      if (e.target.value) {
        wx.getLocation({
          success: res => {
            wx.request({
              url,
              data: {
                location: `${res.latitude},${res.longitude}`,
                output: 'json',
                ak: ak
              },
              success: res => {
                if (res.data.status === 0) {
                  this.location = res.data.result.addressComponent.city
                } else {
                  this.location = '未知地址'
                }
              }
            })
          }
        })
      } else {
        this.location = ''
      }
    },
    getPhone (e) {
      if (e.target.value) {
        let phone = wx.getSystemInfoSync()
        this.phone = phone.model
      } else {
        this.phone = ''
      }
    },
    async addComment () {
      if (!this.comment) {
        return
      }
      let data = {
        bookid: this.id,
        location: this.location,
        phone: this.phone,
        comment: this.comment,
        openid: this.userInfo.openId
      }
      try {
        await post('/weapp/addcomment', data)
        this.comment = ''
        this.getComments()
      } catch (e) {
        // showModal('失败',e.msg)
      }
    },
    async getComments () {
      const comments = await get('/weapp/commentlist', {id: this.id})
      this.comments = comments.data.list
    }
  },
  computed: {
    showAdd () {
      console.log('xx')
      if (!this.userInfo.openId) {
        return false
      }
      if (this.comments.some(v => v.openid === this.userInfo.openId)) {
        return false
      }
      return true
    }
  },
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  },
  mounted () {
    this.id = this.$root.$mp.query.id
    this.getDetail()
    const userInfo = wx.getStorageSync('userInfo')
    if (userInfo) {
      this.userInfo = userInfo
    }
    this.getComments()
  }
}
</script>
<style lang="scss" scoped>
.comments {
  margin-top: 10px;
  textarea {
    width: 730rpx;
    height: 220rpx;
    padding: 10px;
    background-color: #eee;
    font-size: 30rpx;
  }
  .location {
    font-size: 30rpx;
    margin-top: 10px;
    span {
      font-size: 30rpx;
    }
  }
  .phone {
    font-size: 30rpx;
    margin-top: 10px;
    span {
      font-size: 30rpx;
    }
  }
}
</style>


